<!--
open():通过父组件打开picker弹窗，
searchKeyword：搜索关键字，
list：传进来的数据格式：[{text:'',id:''}],
filteredShopList:使用的数据，通过过滤list形成最新的list
setIndex（index）:父级调用激活行，index是索引
confirm()将选择的对象传出
  -->
<template>

  <van-popup v-model="showPopup" round position="bottom">
    <div style="padding: 10px;">
      <van-field v-model="searchKeyword" :placeholder="placeholder" left-icon="search" />
    </div>
    <van-picker ref="pickerRef" show-toolbar :columns="filteredShopList" @cancel="close" @confirm="confirm($event)">
      <template #option="{ text }">
        <span>{{ text }}</span>
      </template>
    </van-picker>
  </van-popup>
</template>

<script>
export default {
  emits: ['onConfirmShopList',],
  props: {
    // 原始门店列表
    list: {
      type: Array,
      required: true
    },
    placeholder: {
      type: String,
    }
  },
  data() {
    return {
      searchKeyword: '',
      showPopup: false,
    }
  },
  computed: {
    filteredShopList() {
      if (!this.searchKeyword.trim()) {
        return this.list;
      }
      const keyword = this.searchKeyword.toLowerCase();
      return this.list.filter(item =>
        item.text.toLowerCase().includes(keyword)
      );
    }
  },
  created() {

  },
  methods: {
    open() {
      this.showPopup = true
    },
    close() {
      this.showPopup = false
      this.searchKeyword = ''
    },
    setIndex(index) {
      this.$nextTick(() => {
        this.$refs.pickerRef.setIndexes([index === -1 ? 0 : index]);
      })
    },
    confirm(data) {
      this.close()
      this.$emit('onConfirmShopList', data)
    }
  },
}
</script>
<style scoped lang='scss'></style>
